.arrow(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  position: relative;
  background: @arrowBgColor;
  border: 1px solid @arrowBorderColor;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: solid transparent;
  }

  &::before {
    border-width: @arrowSize;
  }

  &::after {
    border-width: @arrowSize - @arrowWidth;
  }

  /*&.lt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      left:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      left:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.rt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      right:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.lb{
    &::before,&::after{
      bottom:0;
      top:100%;
      border-top-color:@arrowBorderColor;
    }
    &::before{
      left:@position;
    }
    &::after{
      left:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }
  &.rb{
    &::before,&::after{
      bottom:0;
      top:100%;
    }
    &::before{
      right:@position;
      border-top-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }*/
}

.arrow-lt(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    top: auto;
    bottom: 100%;
  }

  &::before {
    left: @position;
    border-bottom-color: @arrowBorderColor;
  }

  &::after {
    left: calc(@position + @arrowWidth);
    border-bottom-color: @arrowBgColor;
  }
}

.arrow-rt(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    top: auto;
    bottom: 100%;
  }

  &::before {
    right: @position;
    border-bottom-color: @arrowBorderColor;
  }

  &::after {
    right: calc(@position + @arrowWidth);
    border-bottom-color: @arrowBgColor;
  }
}

.arrow-lb(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    bottom: auto;
    top: 100%;
    border-top-color: @arrowBorderColor;
  }

  &::before {
    left: @position;
  }

  &::after {
    left: calc(@position + @arrowWidth);
    border-top-color: @arrowBgColor;
  }
}

.arrow-rb(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    bottom: auto;
    top: 100%;
  }

  &::before {
    right: @position;
    border-top-color: @arrowBorderColor;
  }

  &::after {
    right: calc(@position + @arrowWidth);
    border-top-color: @arrowBgColor;
  }
}

.arrow-tl(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    left: auto;
    right: 100%;
  }

  &::before {
    top: @position;
    border-right-color: @arrowBorderColor;
  }

  &::after {
    top: calc(@position + @arrowWidth);
    border-right-color: @arrowBgColor;
  }
}

.arrow-tr(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    right: auto;
    left: 100%;
  }

  &::before {
    top: @position;
    border-left-color: @arrowBorderColor;
  }

  &::after {
    top: calc(@position + @arrowWidth);
    border-left-color: @arrowBgColor;
  }
}

.arrow-bl(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    left: auto;
    right: 100%;
  }

  &::before {
    bottom: @position;
    border-right-color: @arrowBorderColor;
  }

  &::after {
    bottom: calc(@position + @arrowWidth);
    border-right-color: @arrowBgColor;
  }
}

.arrow-br(@arrowBgColor: #fff, @arrowBorderColor: #f0f0f0, @arrowSize: 6px, @position: 10px, @arrowWidth: 1px) {
  .arrow(@arrowBgColor, @arrowBorderColor, @arrowSize, @position, @arrowWidth);

  &::before,
  &::after {
    right: auto;
    left: 100%;
  }

  &::before {
    bottom: @position;
    border-left-color: @arrowBorderColor;
  }

  &::after {
    bottom: calc(@position + @arrowWidth);
    border-left-color: @arrowBgColor;
  }
}

.angle(@angleSize: 6px, @width: 1px) {
  --pos: calc(@angleSize - @width) / 2;
  position: relative;
  display: inline-block;
  font-style: normal;
  float: right;
  cursor: pointer;
  height: 100%;
  width: 2 * @angleSize;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 1px;
    background-color: currentColor;
    height: @width;
    width: @angleSize;
    left: 0;
    transform-origin: 100% 50% 0;
    transition: all 0.3s;
  }

  &::before {
    left: 0;
  }

  &::after {
    left: calc(@width * 0.7);
  }

  /*&.bottom{
    &::before,&::after{
      top:calc(50% + @pos);
    }
    &::before{
      transform:rotate(135deg);
    }
    &::after{
      transform:rotate(45deg);
    }
  }
  &.top{
    &::before,&::after{
      top:calc(50% - @pos);
    }
    &::before{
      transform:rotate(225deg);
    }
    &::after{
      transform:rotate(-45deg);
    }
  }*/
}

.angle-bt(@angleSize: 6px, @width: 1px) {
  .angle(@angleSize, @width);

  &::before,
  &::after {
    top: calc(50% + var(--pos));
  }

  &::before {
    transform: rotate(135deg);
  }

  &::after {
    transform: rotate(45deg);
  }
}

.angle-top(@angleSize: 6px, @width: 1px) {
  .angle(@angleSize, @width);

  &::before,
  &::after {
    top: calc(50% - var(--pos));
  }

  &::before {
    transform: rotate(225deg);
  }

  &::after {
    transform: rotate(-45deg);
  }
}

.follow(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    left: @followPadding;
    bottom: 0;
    top: auto;
    height: @followSize;
    width: calc(100% - @followPadding * 2);
    background-color: @followColor;
    transform: scale(0);
    transition: transform 0.3s;
    // transition:all .3s;
  }

  /*&:hover,*/
  &.active {
    &::after {
      transform: scale(1);
      transition: transform 0.3s;
    }
  }
}

.follow-hover(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  .follow(@followSize, @followColor, @followPadding);

  &:hover {
    &::after {
      transform: scale(1);
      transition: transform 0.3s;
    }
  }
}

.follow-vertical(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  .follow(@followSize, @followColor, @followPadding);

  &::after {
    left: 0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: @followSize;
  }
}

.follow-vertical-hover(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  .follow(@followSize, @followColor, @followPadding);

  &:hover {
    &::after {
      transform: scale(1);
      transition: transform 0.3s;
    }
  }
}

.follow-vertical-right(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  .follow(@followSize, @followColor, @followPadding);

  &::after {
    left: calc(100% - @followSize);
    // left:auto;
    // right:0;
    bottom: 0;
    top: 0;
    height: 100%;
    width: @followSize;
  }
}

.follow-vertical-right-hover(@followSize: 3px, @followColor: currentColor, @followPadding: 0px) {
  .follow(@followSize, @followColor, @followPadding);

  &:hover {
    &::after {
      transform: scale(1);
      transition: transform 0.3s;
    }
  }
}

.tooltip(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  position: relative;

  // cursor:pointer;
  &:hover {
    &::before,
    &::after {
      display: block;
    }
  }

  &::before,
  &::after {
    display: none;
    position: absolute;
    z-index: 10000;
    background-color: @tooltipBgColor;
    border: 1px solid @tooltipBorderColor;
  }

  &::before {
    content: attr(tooltips);
    z-index: 100002;
    padding: 4px 10px;
    text-align: left;
    max-width: 200px;
    font-size: 1.2rem;
    color: @tooltipColor;
    border-radius: 4px;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
    white-space: nowrap; //normal;
    // word-wrap:break-word;
    // word-break:break-all;
  }

  &::after {
    content: "";
    height: @arrowSize + 2px;
    width: @arrowSize + 2px;
    border-left-color: transparent;
    border-bottom-color: transparent;
  }
}

.tooltip-lb(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  &[tooltips] {
    .tooltip(@tooltipBgColor, @tooltipBorderColor, @tooltipColor, @position, @arrowSize);

    &::before {
      left: 0;
      bottom: calc(100% + @arrowSize);
    }

    &::after {
      left: @position;
      bottom: calc(100% + @arrowSize / 2);
      transform: rotate(135deg);
    }
  }
}

.tooltip-rb(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  &[tooltips] {
    .tooltip(@tooltipBgColor, @tooltipBorderColor, @tooltipColor, @position, @arrowSize);

    &::before {
      right: 0;
      bottom: calc(100% + @arrowSize);
    }

    &::after {
      right: @position;
      bottom: calc(100% + @arrowSize / 2);
      transform: rotate(135deg);
    }
  }
}

.tooltip-lt(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  &[tooltips] {
    .tooltip(@tooltipBgColor, @tooltipBorderColor, @tooltipColor, @position, @arrowSize);

    &::before {
      left: 0;
      top: calc(100% + @arrowSize);
    }

    &::after {
      left: @position;
      top: calc(100% + @arrowSize / 2);
      transform: rotate(-45deg);
    }
  }
}

.tooltip-rt(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  &[tooltips] {
    .tooltip(@tooltipBgColor, @tooltipBorderColor, @tooltipColor, @position, @arrowSize);

    &::before {
      right: 0;
      top: calc(100% + @arrowSize);
    }

    &::after {
      right: @position;
      top: calc(100% + @arrowSize / 2);
      transform: rotate(-45deg);
    }
  }
}

.tooltip-tr(@tooltipBgColor: #303133, @tooltipBorderColor: #303133, @tooltipColor: #fff, @position: 15px, @arrowSize: 8px) {
  &[tooltips] {
    .tooltip(@tooltipBgColor, @tooltipBorderColor, @tooltipColor, @position, @arrowSize);

    &::before {
      top: 0;
      left: calc(100% + @arrowSize);
    }

    &::after {
      top: @position;
      left: calc(100% + @arrowSize / 2);
      transform: rotate(-45deg);
    }
  }
}

/*callout*/
/*.callout(@info: #428bca, @success: #5cb85c, @warning: #f0ad4e, @danger: #d9534f) {
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
  color: #777;
  border-left-width: 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
  border-left-color: @info;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 6px solid transparent;
    border-left: 6px solid @info;
  }
  &.info {
    border-left-color: @info;
    &::after {
      border-left-color: @info;
    }
  }
  &.success {
    border-left-color: @success;
    &::after {
      border-left-color: @success;
    }
  }
  &.warning {
    border-left-color: @warning;
    &::after {
      border-left-color: @warning;
    }
  }
  &.danger {
    border-left-color: @danger;
    &::after {
      border-left-color: @danger;
    }
  }
}*/
